<template>
<div class="contestview-box">
  <div class="contest-inner-box">
    <div class="contest-top">
      <a-space direction="vertical" class="contest-top-title">
        <div class="contest-title">
          <img src="../assets/logo.png" class="contest-title-img">
        </div>
        <div class="contest-title">
          <span class="font-title-style">
            YOJ
          </span>
          <span class="font-title-style">
            竞赛
          </span>
        </div>
        <div class="contest-title">
          快来参加每周排位赛，提升你的世界排名
        </div>
      </a-space>
    </div>
    <a-row class="enterContestBlock" :gutter="10" >
      <a-col class="enterContestBlockItem cursorPoint" :span="16" >
        <a-list @click="enterContest(curTowContest[0])">
          <a-list-item>
            标题：{{curTowContest[0]?.title}}
          </a-list-item>
          <a-list-item>
            内容：{{curTowContest[0]?.content}}
          </a-list-item>
          <a-list-item>
            开始时间：{{curTowContest[0]?.starttime}}
          </a-list-item>
        </a-list>
      </a-col>
      <a-col class="enterContestBlockItem cursorPoint" style="left: 60%" :span="8">
        <a-list @click="enterContest(curTowContest[1])">
          <a-list-item>
            标题：{{curTowContest[1]?.title}}
          </a-list-item>
          <a-list-item>
            内容：{{curTowContest[1]?.content}}
          </a-list-item>
          <a-list-item>
            开始时间：{{curTowContest[1]?.starttime}}
          </a-list-item>
        </a-list>
      </a-col>
    </a-row>
    <div style="margin-top: 20px"/>
    <a-row :gutter="20" >
      <a-col :span="12">
        <h2 style="text-align: center">
          排名
        </h2>
        <div class="contest-rank-img ">
          <div class="contest-rank-img1 cursorPoint" >
            <img src="../assets/logo.png"/>
            <a-tag>
              第二名
            </a-tag>
          </div>
          <div class="contest-rank-img2 cursorPoint" >
            <img src="../assets/logo.png"/>
            <a-tag>
              第一名
            </a-tag>
          </div>
          <div class="contest-rank-img3" >
            <img src="../assets/logo.png"/>
            <a-tag>
              第三名
            </a-tag>
          </div>
        </div>
        <a-card title="用户排名">
          <a-list :max-height="420"  :scrollbar="true">
            <a-list-item v-for="idx in 14" :key="idx">
              <a-list-item-meta
                title="Beijing Bytedance Technology Co., Ltd."
                description="Beijing ByteDance Technology Co., Ltd. is an enterprise located in China."
              >
                <template #avatar>
                  <a-avatar shape="square">
                    <img
                      alt="avatar"
                      src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
                    />
                  </a-avatar>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="往期竞赛回顾">
          <template #extra>
            <a-link type="primary" @click="toManageContest">
              发起竞赛 >>
            </a-link>
          </template>
          <a-table class="main_table" :style="{ minHeight: '670px' }"
                   :columns="columns"
                   :data="contestList"
                   size="large"
                   style="min-height: 530px"
                   @row-click="showJinContestDetail">
            <template #operation>
              detail >>
            </template>
          </a-table>
<!--          <a-list :max-height="680"  :scrollbar="true">
            <a-list-item v-for="idx in 10" :key="idx">
              <a-list-item-meta
                title="Beijing Bytedance Technology Co., Ltd."
                description="Beijing ByteDance Technology Co., Ltd. is an enterprise located in China."
              >
              </a-list-item-meta>
            </a-list-item>
          </a-list>-->
        </a-card>
      </a-col>
    </a-row>
  </div>
</div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { ContestControllerService, ContestUserControllerService } from "../../generated";
import { Message } from "@arco-design/web-vue";
import store from "@/store";
import {compareTime} from '../util/utils.ts';

const userid = ref(0);
const curTowContest = ref({});
const contestList = ref([]);
const router = useRouter();
// 跳转 发起竞赛
const toManageContest = () => {
  router.push({
    path: '/manage_contest'
  })
}
onMounted(async () => {
  // 获取最近两场比赛
  let res = await ContestControllerService.getTwoCurrentUsingGet();
  if (res.code == 0) {
    curTowContest.value = res.data;
  }else {
    Message.error(res.message);
  }
  // 获取已经已经结束的竞赛列表
  res = await ContestControllerService.getEndContestUsingGet();
  if (res.code == 0) {
    contestList.value = res.data;
  }else{
    Message.error(res.message);
  }
  userid.value = store.state.user.curUser.id;
})

const columns = [
  {
    title: '比赛',
    dataIndex: 'title'
  }, {
    title: '开始时间',
    dataIndex: 'starttime',
  }, {
    title: '',
    slotName: 'operation',
  }
];
const showJinContestDetail = (contest) => {
  router.push({
    path: '/online_contest_team_detail',
    query: {
      tids: contest.tids // 题目id数组
    }
  })
}
// 参加比赛
const joinContest = async (contest) => {
  let res = await ContestUserControllerService.joinUsingPost({
    contestid: contest.id,
    userid: userid.value
  });
  if (res.code == 0) {
    Message.success("参加成功")
  }else {
    Message.error("参加比赛失败，" + res.message);
  }
  return res.code;
}
const judgeTimeForToContest = (contest) => {
  let comRes = compareTime(contest.starttime, new Date(), contest.contestnum);
  if (comRes == 1) {
    console.log('start', contest.starttime);
    console.log('cur', new Date());
    console.log('compera', compareTime(contest.starttime, new Date(), contest.contestnum));
    // 已经开始了 跳转做题
    showJinContestDetail(contest);
  }else if (!comRes) {
    Message.error("比赛还没开始");
  }else {
    Message.error("比赛已经结束");
  }
}
const enterContest = async (contest) => {
  // 查询用户是否已经参数
  let res = await ContestUserControllerService.isJoinUsingGet(contest.id,  userid.value);
  if (res.code == 0) {
    // 判断比赛是否开始
    judgeTimeForToContest(contest);
  }else {
    // 参加比赛
    let code = joinContest(contest);
    if (code === 0) {
      // 判断比赛是否开始 跳转页面
      judgeTimeForToContest(contest);
    }
  }
}
</script>

<style scoped>
.contestview-box {
  margin: 0 auto;
}
.contest-inner-box {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}
.contest-top {
  height: 25vh;
  background-color: rgba(211, 211, 211, 0.73);
  background-repeat: no-repeat;
  background-size: 100%;
  //padding-top: 10vh;
}
.contest-top-title {
  width: 30%;
  margin-left: 35%;
}
.contest-title-img{
  width: 20%;
  height: 20%;
}
.contest-title {
  text-align: center;
}
.font-title-style {
  font-weight: bolder;
  font-size: 20px;
}
.enterContestBlock {
  position: relative;
  height: 18vh;
}
.enterContestBlockItem {
  position: absolute;
  width: 30%;
  background-color: rgba(100, 149, 237, 0.34);
  height: 100%;
  border-radius: 10px;
  top: -20%;
  left: 12%;
}
.contest-rank-img {
  position: relative;
  width: 100%;
  height: 35vh;
  overflow: hidden;
}
.contest-rank-img img {
  width: 100%;
  border: 3px solid rgba(30, 144, 255, 0.27);
  border-radius: 50%;
}
.contest-rank-img>div {
  display: inline;
  position: absolute;
  width: 50px;
  height: 50px;
}
.contest-rank-img1 {
  top: 40%;
  left: 10%;
}
.contest-rank-img2 {
  top: 10%;
  left: 45%;
}
.contest-rank-img3 {
  top: 40%;
  left: 80%;
}
.cursorPoint {
  cursor: pointer;
}
</style>